<template>
  <div class="quickSearch">
    <div class="quick" v-show="query != ''">
      <div class="search_query" @click="querySearch">
        <span>详细搜索</span>
        <span class="span_query">{{query}}</span>
      </div>
      <div class="quick_singer_wrap" v-for="item of quickObj" :key="item.type">
        <div v-show="item.itemlist.length">
          <div class="quick_singer_title">{{item.name}}</div>
          <div class="quick_singer_item" v-for="list of item.itemlist" :key="list.id" @click="selectItem(item,list)">
            <img :src="list.pic" v-if="list.pic">
            <p> {{list.name}}</p>
          </div>
        </div>
      </div>
      <no-result v-show='noResultFlag' class='no-result-container' />
    </div>

  </div>
</template>
<script>
import NoResult from 'components/result/NoResult'
import { mapState } from 'vuex'
export default {
  components: { NoResult },
  name: 'quicksearch',
  props: {
    query: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapState(['historyQuery'])
  },
  data() {
    return {
      quickObj: {},
      noResultFlag: false
    }
  },
  watch: {
    query() {
      if (this.query == '') {
        this.quickObj = []
        return
      }
      clearTimeout(this.timer)

      this.timer = setTimeout(() => {
        this.quickSearch()
        this.timer = null
      }, 1000)
    }
  },
  methods: {
    async quickSearch() {
      const {
        data: { data: res }
      } = await this.$http.get('/api/search/quick?key=' + this.query)

      this.quickObj = res
      this.noResultFlag = Object.keys(this.quickObj).length ? false : true
      this.local()
    },
    selectItem(item, list) {
      if (item.name === '专辑') {
        let album = []
        album.push(list)
        album.map(item => {
          item.id = list.id
          item.albumMID = list.mid
          item.cover = list.pic
          item.title = list.name
        })
        this.$store.commit('setAlbum', album[0])
        this.$store.commit('setValue', '专辑')
        this.$router.push('/album/id=' + album[0].id)
      } else if (item.name == '歌手') {
        let singer = []
        singer.push(list)
        singer.map(item => {
          item.singer_mid = list.mid
          item.singer_pic = list.pic
          item.singer_name = list.name
          item.singer_id = list.id
        })
        this.$router.push({
          path: '/singer/mid=' + singer[0].singer_mid
        })
        this.$store.commit('setSinger', singer[0])
      } else if (item.name == '单曲') {
        this.searchOne(list.name, list.singer)
      } else if (item.name == 'MV') {
        this.$router.push('/mv/' + list.vid)
      }

      this.local()
    },
    async searchOne(name, singer) {
      // 解决快速搜索单曲没有歌曲的专辑信息，获取不到图片信息问题
      const {
        data: { data: res }
      } = await this.$http.get('/api/song/find?key=' + `${name + singer}`)
      res.mid = res.songmid
      res.name = res.songname
      res.album = {
        id: res.albumid,
        mid: res.albummid,
        name: res.albumname
      }
      let musicList = []
      musicList.push(res)

      this.$store.commit('setCurrentIndex', 0) // 传递当前播放歌曲索引
      this.$store.commit('setPlayList', musicList) //传递当前播放歌曲列表
      this.$store.commit('setSequenceList', musicList) //传递顺序播放列表
      this.$store.commit('setFullScreen', true) //传递当前播放歌曲列表
    },
    // 封装存储的方法
    local() {
      // 进行本地存储
      let list = this.historyQuery.filter(v => v !== this.query)
      list.unshift(this.query)
      this.$store.commit('setHistoryQuery', list)
    },
    querySearch() {
      let data = encodeURIComponent(this.query)
      this.$router.push('/search/' + data)
      this.local()
    }
  }
}
</script>
<style lang="stylus" scoped>
.quickSearch {
  position: fixed;
  margin: 0 20px;
  width: calc(100% - 40px);
  z-index: 2;

  .quick {
    .search_query {
      padding: 10px;
      background-color: #111;

      .span_query {
        font-size: 16px;
        padding-left: 10px;
        color: var(--color-theme);
      }
    }

    .quick_singer_wrap {
      .quick_singer_title {
        font-size: 16px;
        padding: 10px 10px 0;
        color: var(--color-theme);
      }

      .quick_singer_item {
        display: flex;
        padding: 10px 20px 0;

        img {
          width: 40px;
          height: 40px;
          margin-right: 10px;
        }

        p {
          font-size: 14px;
          align-self: center;
          padding-bottom: 5px;
        }
      }
    }
  }
}

.no-result-container {
  margin-top: 100px;
}
</style>